<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        .box {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
            box-sizing: border-box;
        }

        .box img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id='app'>
        <box v-for="item in list" :key="item.img" :item="item"></box>
    </div>
</body>

<template id="box">
    <div class="box">
        <img :src="item.img" alt="">
        <h3>{{item.title}}</h3>
        <p>{{item.price}}</p>
    </div>
</template>

<script>

    const box = {
        template: '#box',
        props: ['item'],
        data() {
            return {
            }
        },
    }


    const app = {
        data() {
            return {
                list: [
                    {
                        img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/232013/23/36636/94435/676299c7Fab545cc0/0feef9d782e41a23.jpg!q70.dpg.webp',
                        title: '凡士林沐浴露',
                        price: '99'
                    }, {
                        img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t26188/22/515122009/310966/bfb5a46b/5bb0624cN1e39ace5.jpg!q70.dpg.webp',
                        title: '泸州老窖',
                        price: '199'
                    }
                ]
            }
        },
        components: {
            box
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>